<template>
  <div class="product-statics-com">
    <el-card class="card-com" shadow="never">
      <div class="card-1">
        <searchPanel @refresh="getData('reset')" @changePanel="resizeWin">
          <!-- 查询面板 -->
          <template v-slot:search>
            <el-form :inline="true" :model="listSearch" ref="ruleFormRef" class="demo-form-inline" label-width="120px"
              :rules="rules">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="产品编码">
                    <el-select multiple v-model="listSearch.condition.productCodeList" style="width:100%"
                      @change="getData('search')" placeholder="请选择产品" filterable clearable collapse-tags
                      collapse-tags-tooltip>
                      <el-option v-for="item in listCollect.productList" :key="item.id" :value="item.key"
                        :label="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="渠道Key">
                    <ChannelSelect v-model:select-value="listSearch.condition.channelCodeList" :multiple="true"
                      @my-change="getData('search')"></ChannelSelect>

                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="统计日期">
                    <TimePicker v-model:operate-time="operateTime"></TimePicker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="签约数量" prop="signQuantityStart">
                    <el-input-number style="width: 45%;" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" v-model.number="listSearch.condition.signQuantityStart" clearable
                      placeholder="起始值" :min="0" :controls="false" />

                    <span style="margin:0 5px"> 到 </span>
                    <el-input-number clearable v-model.number="listSearch.condition.signQuantityEnd" placeholder="结束值"
                      :controls="false" @keyup.enter.native="getData('search')" @clear="getData('search')" :min="0"
                      style="width: 46%;" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="解约数量" prop="cancelQuantityStart">
                    <el-input-number style="width: 45%;" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" v-model.number="listSearch.condition.cancelQuantityStart" clearable
                      :min="0" placeholder="起始值" :controls="false" />

                    <span style="margin:0 5px"> 到 </span>
                    <el-input-number clearable v-model.number="listSearch.condition.cancelQuantityEnd" placeholder="结束值"
                      :controls="false" @keyup.enter.native="getData('search')" @clear="getData('search')" :min="0"
                      style="width: 46%;" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="支付数量" prop="paymentQuantityStart">
                    <el-input-number style="width: 45%;" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" v-model.number="listSearch.condition.paymentQuantityStart" clearable
                      :min="0" placeholder="起始值" :controls="false" />

                    <span style="margin:0 5px"> 到 </span>
                    <el-input-number clearable v-model.number="listSearch.condition.paymentQuantityEnd"
                      placeholder="结束值" :controls="false" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" :min="0" style="width: 46%;" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="退费数量" prop="refundQuantityStart">

                    <el-input-number style="width: 45%;" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" v-model.number="listSearch.condition.refundQuantityStart" clearable
                      :min="0" placeholder="起始值" :controls="false" />

                    <span style="margin:0 5px"> 到 </span>
                    <el-input-number clearable v-model.number="listSearch.condition.refundQuantityEnd" placeholder="结束值"
                      :controls="false" @keyup.enter.native="getData('search')" @clear="getData('search')" :min="0"
                      style="width: 46%;" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="支付金额" prop="paymentAmountStart">
                    <el-input-number style="width: 45%;" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" v-model.number="listSearch.condition.paymentAmountStart" :min="0"
                      clearable placeholder="起始值" :controls="false" />

                    <span style="margin:0 5px"> 到 </span>
                    <el-input-number clearable v-model.number="listSearch.condition.paymentAmountEnd" placeholder="结束值"
                      :controls="false" @keyup.enter.native="getData('search')" @clear="getData('search')" :min="0"
                      style="width: 46%;" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="退费金额" prop="refundAmountStart">
                    <el-input-number style="width: 45%;" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" v-model.number="listSearch.condition.refundAmountStart" clearable
                      placeholder="起始值" :min="0" :controls="false" />

                    <span style="margin:0 5px"> 到 </span>
                    <el-input-number clearable v-model.number="listSearch.condition.refundAmountEnd" placeholder="结束值"
                      :min="0" :controls="false" @keyup.enter.native="getData('search')" @clear="getData('search')"
                      style="width: 46%;" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="解约率" prop="cancelRateStart">
                    <el-input-number style="width: 45%;" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" v-model.number="listSearch.condition.cancelRateStart" clearable
                      placeholder="起始值" :controls="false" :min="0" :max="1" :precision="2" />

                    <span style="margin:0 5px"> 到 </span>
                    <el-input-number clearable v-model.number="listSearch.condition.cancelRateEnd" placeholder="结束值"
                      :min="0" :max="1" :precision="2" :controls="false" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" style="width: 46%;" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="留存率" prop="retentionRateStart">
                    <el-input-number style="width: 45%;" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" v-model.number="listSearch.condition.retentionRateStart" clearable
                      placeholder="起始值" :controls="false" :min="0" :max="1" :precision="2" />

                    <span style="margin:0 5px"> 到 </span>
                    <el-input-number clearable v-model.number="listSearch.condition.retentionRateEnd" placeholder="结束值"
                      :min="0" :max="1" :precision="2" :controls="false" @keyup.enter.native="getData('search')"
                      @clear="getData('search')" style="width: 46%;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="end">
                <el-button type="primary" @click="getData('search')">查询</el-button>
                <el-button @click="getData('reset')">重置</el-button>
              </el-row>
            </el-form>
          </template>
          <!-- 字段添加 -->
          <template v-slot:edit>
            <!-- <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_CHANNEL_STATISTICS:TCL:EXPORT'" title="下载TCL渠道统计列表" @click="btnDown('tcl')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_CHANNEL_STATISTICS:TCL:EXPORT'" title="查看下载TCL渠道统计列表" @click="btnDownList('tcl')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_CHANNEL_STATISTICS:HHT:EXPORT'" title="下载火火兔渠道统计列表" @click="btnDown('HHT')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_CHANNEL_STATISTICS:HHT:EXPORT'" title="查看下载火火兔渠道统计列表" @click="btnDownList('HHT')"></el-button> -->

            <!-- <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_SIGN:JXW:EXPORT'" title="下载九学王渠道统计列表" @click="btnDown('JXW')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_SIGN:JXW:EXPORT'" title="查看下载九学王渠道统计列表" @click="btnDownList('JXW')"></el-button> -->
            <el-dropdown :hide-on-click="false" style="margin: 0 10px;" trigger="click">
              <el-button title="过滤表头">
                <el-icon :size="18">
                  <Grid />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-checkbox-group v-model="selectTitle" size="small" @change="checkboxChange">
                    <el-dropdown-item v-for="item in showTitle" :key="item.prop">
                      <el-checkbox :label="item.label" :value="item.prop" />
                    </el-dropdown-item>
                  </el-checkbox-group>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </searchPanel>
      </div>
      <div class="card-2">
        <OnlyTable ref="onlyTableRef" class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total"
          @get-page="handPage" :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
          :loading="pageParams.loadIng">
          <template #handle="scope">
            <!-- <el-button type="primary" size="small" link @click="detailBtn(scope.row)"
                    v-permission="'SUPPLIER:DETAIL'">查看</el-button>
                <el-button v-permission="'SUPPLIER:CREATE-EDIT'" type="primary" size="small" link
                    @click="AddEditBtn('edit', scope.row)">编辑</el-button>
                <el-button v-permission="'SUPPLIER:DELETE'" type="danger" size="small" link
                    @click="delBtn(scope.row)">删除</el-button> -->
          </template>
        </OnlyTable>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { onMounted, nextTick, onUnmounted, computed, reactive } from "vue";
import _ from "lodash"
import { Download, Plus, List } from '@element-plus/icons-vue'
import { productStaticsListPageStore } from "./pageStore"
import { useCustomMenuStore } from "@/store/customMenu"
import { useComListData } from "@/store/list";

const { listCollect, getProListAll } = useComListData()

const ruleFormRef = ref<FormInstance>();
const { detailData, tableProp, listSearch, pageParams } = storeToRefs(productStaticsListPageStore())
const { getData1 } = productStaticsListPageStore()
const { showCom, getKey } = storeToRefs(useCustomMenuStore())
const selectTitle = ref<any>([])
const onlyTableRef = ref()
const rules = reactive({
  signQuantityStart: [
    {
      validator: (rule, value, callback) => {
        if (!listSearch.value.condition.signQuantityEnd) callback()
        if (!listSearch.value.condition.signQuantityStart) callback()
        if (listSearch.value.condition.signQuantityStart >= listSearch.value.condition.signQuantityEnd) {
          callback(new Error('起始值必须小于终止值'));
        } else {
          callback();
        }
      },
      trigger: "blur",
    }
  ],
  cancelQuantityStart: [
    {
      validator: (rule, value, callback) => {
        if (!listSearch.value.condition.cancelQuantityStart) callback()
        if (!listSearch.value.condition.cancelQuantityEnd) callback()
        if (listSearch.value.condition.cancelQuantityStart >= listSearch.value.condition.cancelQuantityEnd) {
          callback(new Error('起始值必须小于终止值'));
        } else {
          callback();
        }
      },
      trigger: "blur",
    }
  ],
  paymentQuantityStart: [
    {
      validator: (rule, value, callback) => {
        if (!listSearch.value.condition.paymentQuantityStart) callback()
        if (!listSearch.value.condition.paymentQuantityEnd) callback()
        if (listSearch.value.condition.paymentQuantityStart >= listSearch.value.condition.paymentQuantityEnd) {
          callback(new Error('起始值必须小于终止值'));
        } else {
          callback();
        }
      },
      trigger: "blur",
    }
  ],
  refundQuantityStart: [
    {
      validator: (rule, value, callback) => {
        if (!listSearch.value.condition.refundQuantityStart) callback()
        if (!listSearch.value.condition.refundQuantityEnd) callback()
        if (listSearch.value.condition.refundQuantityStart >= listSearch.value.condition.refundQuantityEnd) {
          callback(new Error('起始值必须小于终止值'));
        } else {
          callback();
        }
      },
      trigger: "blur",
    }
  ],
  paymentAmountStart: [
    {
      validator: (rule, value, callback) => {
        if (!listSearch.value.condition.paymentAmountStart) callback()
        if (!listSearch.value.condition.paymentAmountEnd) callback()
        if (listSearch.value.condition.paymentAmountStart >= listSearch.value.condition.paymentAmountEnd) {
          callback(new Error('起始值必须小于终止值'));
        } else {
          callback();
        }
      },
      trigger: "blur",
    }
  ],
  refundAmountStart: [
    {
      validator: (rule, value, callback) => {
        if (!listSearch.value.condition.refundAmountStart) callback()
        if (!listSearch.value.condition.refundAmountEnd) callback()
        if (listSearch.value.condition.refundAmountStart >= listSearch.value.condition.refundAmountEnd) {
          callback(new Error('起始值必须小于终止值'));
        } else {
          callback();
        }
      },
      trigger: "blur",
    }
  ],
  cancelRateStart: [
    {
      validator: (rule, value, callback) => {
        if (!listSearch.value.condition.cancelRateStart) callback()
        if (!listSearch.value.condition.cancelRateEnd) callback()
        if (listSearch.value.condition.cancelRateStart >= listSearch.value.condition.cancelRateEnd) {
          callback(new Error('起始值必须小于终止值'));
        } else {
          callback();
        }
      },
      trigger: "blur",
    }
  ],
  retentionRateStart: [
    {
      validator: (rule, value, callback) => {
        if (!listSearch.value.condition.retentionRateStart) callback()
        if (!listSearch.value.condition.retentionRateEnd) callback()
        if (listSearch.value.condition.retentionRateStart >= listSearch.value.condition.retentionRateEnd) {
          callback(new Error('起始值必须小于终止值'));
        } else {
          callback();
        }
      },
      trigger: "blur",
    }
  ],
})
const operateTime = ref()
onMounted(() => {
  selectTitle.value = tableProp.value.propsList.filter(it => it.hidden && it.label != "操作").map(item => item.prop)

  listSearch.value.condition.supplierCode = getKey
  window.addEventListener('resize', resizeWin)
  getData1('reset')
  getProListAll({})
  nextTick(() => {
    const dom1 = document.querySelector(".card-1") as any;
    const dom2 = document.querySelector(".card-com") as any;
    if (dom2) {
      const height = dom2.offsetHeight - dom1.offsetHeight - 70;
      pageParams.value.tableHeight = height;
    }
  })
})
const btnDown = (type: string) => { }
const btnDownList = (type: string) => { }
onUnmounted(() => {
  window.removeEventListener('resize', resizeWin)
})
const resizeWin = _.debounce(() => {
  const dom1 = document.querySelector(".card-1") as any;
  const dom2 = document.querySelector(".card-com") as any;
  if (dom2) {
    const height = dom2.offsetHeight - dom1.offsetHeight - 70;
    pageParams.value.tableHeight = height;
  }
}, 200)
const handPage = (page) => {
  listSearch.value.pageSize = page.pageSize
  listSearch.value.pageNum = page.pageNum
  getData1('search')
}
const getData = async (type: string) => {
  if (type == 'reset') {
    onlyTableRef.value.initPagination()
  }
  const res = await ruleFormRef.value.validate()
  if (res) {
    getData1(type)
  }
}
const showTitle = computed(() => {
  return tableProp.value.propsList.filter(it => it.label != "操作")
})
const checkboxChange = (val: string[]) => {
  pageParams.value.loadIng = true
  // 进入的 全部为 true 没有的为false
  tableProp.value.propsList = tableProp.value.propsList.map((item: any) => {

    if (val.includes(item.prop)) {
      return {
        ...item,
        hidden: true
      }
    } else if (item.label == "操作") {
      return {
        ...item,
        hidden: true
      }
    } else {
      return {
        ...item,
        hidden: false
      }
    }
  })
  pageParams.value.loadIng = false
}

</script>

<style scoped lang="scss">
.product-statics-com {
  height: calc(100vh - 156px);

  display: flex;

  .card-com {
    margin-top: 10px;
    flex-grow: 1;
  }
}
</style>